<template>
  <up-overlay :show="show">
    <view class="bg-box">
      <image class="bg-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_bg.png" />
      <view class="bg-title">
        <text class="title-text">
          每日签到领星币
        </text>
        <view class="title-info">
          <image class="info-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_yes.png" />
          <text class="info-text">
            我的星币：{{ detail?.balance }}
          </text>
        </view>
      </view>

      <view class="bg-content">
        <view class="content-title">
          每天可领取
          <text class="title-num">
            {{ detail?.everyDayIntegral }}
          </text>
          星币
        </view>

        <view class="content-info">
          {{ Number(detail?.lastDay) > 0 ? `您已连续签到${detail.lastDay}天，今日签到可额外领取` : '连续签到每日可额外获得' }}
          <text class="info-num">
            {{ detail?.lastIntegral }}
          </text>
          星币
        </view>

        <view class="content-btn">
          <view class="btn-item" @click="handleSign">
            立即签到
          </view>
        </view>
      </view>
    </view>
    <image class="bg-close" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_close.png" @click="handleClose" />
  </up-overlay>
</template>

<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
});

defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  detail: {
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits(['update:show', 'handleSign']);

const handleSign = () => {
  emit('update:show', false);
  emit('handleSign');
};

const handleClose = () => {
  emit('update:show', false);
};
</script>

<style lang="scss" scoped>
.bg-box {
  position: relative;
  width: 630rpx;
  height: 546rpx;

  .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 630rpx;
    height: 546rpx;
  }

  .bg-title {
    position: relative;
    margin: 77rpx 0 0 34rpx;
    width: 252rpx;
    display: flex;
    flex-direction: column;

    .title-text {
      font-size: 36rpx;
      color: #FFFFFF;
      line-height: 54rpx;
    }

    .title-info {
      display: flex;
      align-items: center;

      .info-icon {
        width: 32rpx;
        height: 32rpx;
      }

      .info-text {
        padding-left: 8rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 36rpx;
      }
    }
  }

  .bg-content {
    position: relative;
    width: 566rpx;
    height: 325rpx;
    margin: 20rpx 32rpx 34rpx 32rpx;
    padding: 32rpx 24rpx;
    background: #fff;
    border-radius: 24rpx;

    .content-title {
      font-size: 32rpx;
      color: #251504;
      line-height: 75rpx;
      text-align: center;

      .title-num {
        display: inline-block;
        padding: 0 8rpx;
        font-size: 42rpx;
        color: #FB7C00;
        line-height: 75rpx;
      }
    }

    .content-info {
      padding: 24rpx 0;
      font-size: 22rpx;
      color: #87837B;
      line-height: 45rpx;
      text-align: center;

      .title-num {
        display: inline-block;
        padding: 0 8rpx;
        font-size: 28rpx;
        color: #FB7C00;
        line-height: 45rpx;
      }
    }

    .content-btn {
      display: flex;

      .btn-item {
        flex: 1;
        background: linear-gradient( 90deg, #FFA029 0%, #FFCD29 100%);
        color: #FFFFFF;
        text-align: center;
        font-weight: bold;
        font-size: 32rpx;
        line-height: 92rpx;
        border-radius: 46rpx;
      }
    }
  }
}

.bg-close {
  margin-top: 64rpx;
  width: 80rpx;
  height: 80rpx;
}
</style>

<style lang="scss">
.u-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
